<template>
  <view class="box">
    <!-- 导航条 -->
    <!-- <view style="height: 80px"></view>
    <view class="navbar">
      <text class="logo" @click="back">
        <uni-icons type="left" size="30"></uni-icons>
      </text>
      <text class="title">发文申请</text>
      <text @click="drafts" class="caogao">草稿箱</text>
    </view> -->
    <view class="example">
      <!-- 基础用法，不包含校验规则 -->
      <uni-forms
        label-width="100px"
        ref="baseForm"
        :rules="rules"
        :model="baseFormData"
      >
        <uni-forms-item
          class="label"
          label="申请部门"
          required
          name="creatorDept"
        >
          <uni-data-select
            v-model="baseFormData.creatorDept"
            :localdata="range"
            @change="change"
            placeholder="请选择"
          ></uni-data-select>
        </uni-forms-item>
        <uni-forms-item class="label" label="需求类型" required name="type">
          <uni-data-select
            v-model="baseFormData.type"
            :localdata="typeList"
            @change="change"
            placeholder="请选择"
          ></uni-data-select>
        </uni-forms-item>
      </uni-forms>
    </view>
    <uni-file-picker
      v-model="file"
      file-mediatype="all"
      :limit="1"
      style="padding: 18px; background-color: #fff;margin:10px 0"
      title="上传文件"
      @select="select"
    ></uni-file-picker>
    <view class="bottom">
      <u-cell-group>
        <u-cell
          title="审批流程"
          label="已有管理员预设审批人，不可修改和删除"
          center
        ></u-cell>
      </u-cell-group>
      <view v-for="item in flow" :key="item" class="step">
        <view class="step_left">
          <uni-icons type="person" size="30"></uni-icons>
          <view class="line"></view>
          <!-- <uni-icons type="person" size="30"></uni-icons> -->
        </view>
        <view class="step_right">
          <view class="step_right_title">
            <text>{{ item }}</text>
          </view>
          <view class="step_right_con">
            <text></text>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 80px"></view>
    <view class="below">
      <u-button class="btn" type="primary" @click="zanSubmit('baseForm')">
        暂存
      </u-button>
      <u-button class="btn" type="primary" @click="submit('baseForm')">
        提交申请
      </u-button>
    </view>
  </view>
</template>

<script>
import { dictionary, add, taskNode } from "@/api/dispatch";
import { deptList } from "@/api/chapters";
export default {
  name: "MinirabbitAdd",

  data() {
    return {
      imageStyles: {
        width: 110,
        height: 100,
      },
      file: [],
      flow: [],
      // 表单数据
      baseFormData: {
        type: "",
        creatorDept: "",
      },
      range: [],
      typeList: [],
      rules: {
        type: {
          rules: [
            {
              required: true,
              errorMessage: "需求类型不能为空",
            },
          ],
        },
        creatorDept: {
          rules: [
            {
              required: true,
              errorMessage: "申请部门不能为空",
            },
          ],
        },
      },
    };
  },
  async onLoad(options) {
    const res = await dictionary();
    this.typeList = res.data?.map((item) => {
      return {
        text: item.dictValue,
        value: item.dictKey,
      };
    });
    const { data } = await taskNode();
    this.flow = data;
    const ress = await deptList();
    this.range = ress.data[0].children.map((item) => {
      return {
        text: item.deptName,
        value: item.id,
      };
    });
    if (options.row) {
      const row = JSON.parse(options.row).variables;
      this.baseFormData.creatorDept = this.range.find(
        (item) => item.text === row.creatorDept
      )?.value;
      this.baseFormData.type = row.type + "";
      this.file = [
        {
          name: row.fileName,
          url: row.fileUrl,
        },
      ];
    }
  },
  mounted() {
    const value = JSON.parse(localStorage.getItem("dispatchApply"));
    if (value) {
      uni.showModal({
        title: "提示",
        content: "是否恢复上次已填写的数据",
        success: (res) => {
          if (res.confirm) {
            this.baseFormData.type = value.type;
            this.baseFormData.creatorDept = value.creatorDept;
            this.file = value.file;
          } else if (res.cancel) {
          }
        },
      });
    }
  },

  methods: {
    select(e) {
      uni.uploadFile({
        url: "http://192.168.3.55:1889/api/blade-resource/oss/endpoint/put-file-attach", //仅为示例，非真实的接口地址
        filePath: e.tempFilePaths[0],
        name: "file",
        formData: {
          // 'user': 'test'
        },
        success: (uploadFileRes) => {
          const data = JSON.parse(uploadFileRes.data);
          this.file = [
            {
              name: data.data.originalName,
              url: data.data.link,
            },
          ];
        },
      });
    },

    drafts() {
      uni.navigateTo({
        url: "/pages/dispatch/drafts",
      });
    },
    back() {
      const pageStack = getCurrentPages();
      if (pageStack.length > 1) {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.switchTab({
          url: "/pages/index/index",
        });
      }
    },
    //提交申请
    async submit(ref) {
      const res = await this.$refs[ref].validate();
      const value = {
        ...res,
        file: [
          {
            label: this.file[0]?.name,
            value: this.file[0]?.url,
          },
        ],
      };
      await add(value);
      localStorage.removeItem("dispatchApply");
      uni.showToast({
        title: `提交通过`,
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },
    //暂存
    async zanSubmit(ref) {
      const res = await this.$refs[ref].validate();
      const value = {
        ...res,
        file: this.file,
      };
      localStorage.setItem("dispatchApply", JSON.stringify(value));
      uni.showToast({
        title: `暂存成功`,
      });
    },
    change() {},
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f2f2f2;
}
.box {
  min-height: 100vh;
  position: relative;
  background-color: #f2f2f2;
}
.example {
  background-color: #fff;
  padding: 5px 0;
}
.navbar {
  width: 100%;
  height: 80px;
  line-height: 80px;
  background-image: url("@/static/dispatch.png");
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .title {
    padding-left: 30%;
    font-size: 19px;
    font-weight: 600;
  }
  .caogao {
    color: #6f87f6;
    margin-left: 20%;
  }
}
.label {
  margin-top: 10px;
  padding: 0 12px 0 18px !important;
}
.bottom {
  margin-top: 10px;
  background-color: #fff;
}
.btn {
  width: 40%;
  display: inline-block;
  line-height: 40px;
  margin: 5%;
}
.below {
  width: 90%;
  position: absolute;
  left: 5%;
  bottom: 20px;
}
.step {
  display: flex;
  padding: 10px;
  width: 100%;
  .step_left {
    flex: 1;
    display: flex;
    flex-direction: column;
    .line {
      width: 1px;
      background-color: #4265f3;
      height: 80px;
      // margin: auto;
      margin: 0 auto;
    }
  }
  .step_right {
    flex: 6;
    .step_right_title {
      font-size: 14px;
      height: 30px;
      line-height: 30px;
    }
    .step_right_con {
      height: 80px;
      font-size: 14px;
      line-height: 80px;
      // padding-left: 40px;
    }
  }
}
</style>